<template>
  <div class="home_container">
    <div class="foot_img">
      <!-- <van-image fit="contain" :src="require('../../assets\images\header\组 2.png')" /> -->
      <img src="../../assets\images\header\zu2.png" alt="" />
    </div>
    <div class="up">
      <div class="left">
        <div @click="handleBtn(1)" class="zt">
          <img src="@img/home/sy_11.png" />
        </div>
        <div @click="handleBtn(3)" class="sh">
          <img src="@img/home/sy_17.png" alt="" />
        </div>
      </div>
      <div class="right">
        <div @click="handleBtn(2)" class="cx">
          <img src="@img/home/sy_14.png" alt="" />
        </div>
        <div class="cj">
          <img @click="handleBtn(4)" src="@img/home/sy_19.png" alt="" />
        </div>
      </div>
    </div>
    <div class="middle"></div>
    <div class="down">
      <div class="left">
        <div @click="handleBtn(5)" class="sp">
          <img src="@img/home/sy_22.png" alt="" />
        </div>
        <div @click="handleBtn(6)" class="kp">
          <img src="@img/home/sy_24.png" alt="" />
        </div>
      </div>
      <div class="right">
        <div @click="handleBtn(7)" class="jc">
          <img src="@img/home/sy_28.png" alt="" />
        </div>
        <div @click="handleBtn(8)" class="ts">
          <img src="@img/home/sy_30.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
const handleBtn = (e) => {
  if (e == 1) {
    router.push({ path: "/subjectInfo" });
  } else if (e == 2) {
    router.push({ path: "/integrity" });
  } else if (e == 3) {
    router.push({ path: "/shopQuery" });
  } else if (e == 4) {
    router.push({ path: "/pricesManager" });
  } else if (e == 5) {
    router.push({ path: "/trad" });
  } else if (e == 6) {
    router.push({ path: "/knowledge" });
  } else if (e == 7) {
    router.push({ path: "/detection" });
  }else{
    router.push({ path: "/complain" });
  }
};
</script>

<style lang="scss" scoped>
.home_container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .foot_img {
    height: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
    }
  }
  .up {
    height: 48%;
    display: flex;
    justify-content: space-between;
    img {
      width: 100%;
      height: 100%;
    }
    .left {
      width: 49%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      div {
        // background: #fff;
        border-radius: 10px;
      }
      .zt {
        height: 40%;
      }
      .sh {
        height: 58%;
      }
    }
    .right {
      width: 49%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      div {
        border-radius: 10px;
      }
      .cx {
        height: 58%;
      }
      .cj {
        height: 40%;
      }
    }
  }
  .middle {
    height: 1%;
  }
  .down {
    height: 42%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    img {
      width: 100%;
      height: 100%;
    }
    .left {
      width: 100%;
      height: 48%;
      display: flex;
      justify-content: space-between;
      div {
        border-radius: 10px;
      }
      .sp {
        width: 59%;
      }
      .kp {
        width: 39%;
      }
    }
    .right {
      height: 48%;
      display: flex;
      justify-content: space-between;
      div {
        border-radius: 10px;
      }
      .jc {
        width: 49%;
      }
      .ts {
        width: 49%;
      }
    }
  }
}
</style>
